<%@ page contentType="text/html; charset=UTF-8"%>
<%@ include file="/WEB-INF/view/system/common/headLogin.jsp"%>

<body>
	<div id="p" class="easyui-panel" title="添加角色" 
		style="padding: 10px; background: #fafafa;text-align:center;">
		<form id="roleAddForm" name="roleAddForm" method="post">
			
			<fieldset>
				<legend style="color: blue;font-size:1.5" >
					角色添加
				</legend>
				<table class="infoTable">
					<tr>
						<td style="width:25%;text-align:right" >角色名称<span class="colrRed"> * </span>：
						</td>
						<td>
							<input type="text" id="newRole_name" name="name"
								class="easyui-validatebox myinput" 
								required="true" validType="length[1,30]" maxlength="30"
								 missingMessage="请输入角色名称"  placeholder="请输入角色名称"/>
						</td>
					</tr>
					<tr>
						<td  style="width:25%;text-align:right" >备注 ：</td>
						<td>
							<textarea class="easyui-validatebox" id="newRole_descr"
								name="descr"  rows="3" 
								cols="50" ></textarea>
							<input type="hidden" id="selectedMenuIds" name="newRoleMenuIds" />
						</td>
					</tr>
				</table>
			</fieldset>
			
			<table id="test" style="margin-top:10px;" ></table>
			<div  style="text-align:center;padding-top:10px;">
				
				<a  class="easyui-linkbutton myLink" iconCls="icon-ok"
					onclick="fileupload()">新增 </a>
				&nbsp;&nbsp;&nbsp;
				<a  class="easyui-linkbutton myLink" iconCls="icon-undo"
					onclick="resetForm()">重置 </a>
			</div>
		</form>
	</div>
</body>
<script>
//重置
function resetForm() {
	$("#roleAddForm").form("reset");
}

$(function() {
	setTreeGridList();
});

function setTreeGridList() {
	$('#test').treegrid({
		title:'权限树',
		striped:true,fit:true,
		nowrap:false,hoverRowBackground:true,fitColumns:true,lines:true,rownumbers:true,singleSelect:false,fixed:true,animate:true,
		//collapsible:true,
		url:'menu/getMenuTreeList.action',
		idField:'id',
		treeField:'name',
		columns:[[
				{field:'id',title:'ID',hidden:true},
				{field:'name',title:'名称',width:'80%',fix:true,
					formatter:function(value,rowData){
						if(rowData.level==4||rowData.level==5){
							if(rowData.type==1){
								return '<input name="menuCheckBox" type="checkbox" id="menuCB' + rowData.id + '" value="' + rowData.id + '" /><span style="color:blue">'
										+ value + '</span>';
							} else {
								return '<input name="menuCheckBox" type="checkbox" id="menuCB' + rowData.id + '" value="' + rowData.id + '" /><span style="color:red">按钮:'
										+ value + '</span>';
							}
						}
						return '<span style="color:gary">' + value + '</span>';
					}
				},{field:'descr',title:'权限描述',fix:true,width:'15%'
				}]],
		onSelect:function(row){
			if(row.level<4){
				$('#test').treegrid('unselect',row.id);
			}else{
				if(!document.getElementById("menuCB"+row.id).checked){
					document.getElementById("menuCB"+row.id).checked=true;
				}
			}
		},
		onUnselect:function(row){
			if(document.getElementById("menuCB"+row.id).checked){
				document.getElementById("menuCB"+row.id).checked=false;
			}
		}
	});
}
//页面提交
function fileupload() {
	//判断参数是否为空
	var valid = $('#roleAddForm').form('validate');
	if (valid) {
		getSelectMenus();
		if ($("#selectedMenuIds").val().length < 1) {
			$.messager.alert("提示信息", "请选择该角色的权限", 'error');
			return;
		}
		//判断参数是否为空
		var valid = $('#roleAddForm').form('validate');
		if (valid) {
			var param = $('#roleAddForm').serializeJson(true);
			$.axs("role/doRoleAdd.action", param, function(data){
				if(data.status == 1){
					$.messager.alert("提示信息",data.msg, 'info', function() {
						parent.$("#roleDataGrid").datagrid('reload');
					resetFrom();
					});
				}else{
					$.messager.alert("提示信息", data.msg, 'error');
				}
			});
		}
	}
}


function getSelectMenus() {
	var selectMenuIds = "";
	var cks = document.getElementsByName("menuCheckBox");
	for ( var i = 0; i < cks.length; i++) {
		if (cks[i].checked == true) {
			selectMenuIds += cks[i].value + ",";
		}
	}
	selectMenuIds = selectMenuIds.substring(0, selectMenuIds.length - 1);
	$("#selectedMenuIds").val(selectMenuIds);
}
</script>
</html>